<template>
	<view class="content">
		<u-navbar title="VIP特权" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff" :background="{backgroundColor:'#000'}"></u-navbar>
		<view style="height: 40rpx;"></view>
		<view class="vip" :style="'background: url(../../static/index/vipBeijing.png);box-sizing: border-box;background-size: 100% 100%;'">
			<view style="height: 20rpx;"></view>
			<view style="width: 90%;margin: auto;height: 80rpx;display: flex;align-items: center;font-size: 35rpx;">开通VIP享受超级特权</view>
			<view style="height: 20rpx;"></view>
			<view style="width: 90%;margin: auto;height: 100rpx;display: flex;align-items: center;">
				<image src="../../static/touxiang.png" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
				<view style="margin-left: 20rpx;">
					<view style="font-size: 30rpx;">{{userInfo.name}}</view>
					<view style="color: #F0F0F0;font-size: 25rpx;margin-top: 20rpx;">非会员</view>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<view class="contents">
			<view v-for="(item,index) in list" class="item" :class="active == index ? 'active' : ''" @click="setActive" :data-index="index">
				<view style="height: 30rpx;"></view>
				<view class="zhanshi" style="font-size: 28rpx;">{{item.vip_name}}</view>
				<view class="zhanshi" style="font-size: 40rpx;color: #D6A666;">¥{{item.vip_price}}</view>
				<view class="zhanshi" style="font-size: 23rpx;">≈{{item.pingjun.toFixed(2)}}元/天</view>
				<image v-if="active == index" src="../../static/xuanzhong.png" class="xuanzhong"></image>
				<view v-if="false" style="position: absolute;top: -25rpx;width: 100%;display: flex;justify-content: center;">
					<view class="biaoji" :style="'background: url(../../static/biaoji.png);box-sizing: border-box;background-size: 100% 100%;'">限时特惠</view>
				</view>
				
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<!-- #ifndef MP-WEIXIN -->
		<view class="pay" v-if="platform != 'devtools' && platform!='ios'">
		<!-- <view class="pay"> -->
			<view :class="pay_index==1?'pay_list_selected':'pay_list'" @click="pay_type(1)">
				<image src="../../static/pay/alipay.png" mode=""></image>
				<view class="pay_type">支付宝</view>
				<view :class="pay_index==1?'pay_radio_selected':'pay_radio'">
					<view class="selected" v-if="pay_index==1"></view>
				</view>
			</view>
			<view :class="pay_index==2?'pay_list_selected':'pay_list'" @click="pay_type(2)">
				<image src="/static/pay/wechat.png" mode=""></image>
				<view class="pay_type">微信支付</view>
				<view :class="pay_index==2?'pay_radio_selected':'pay_radio'">
					<view class="selected" v-if="pay_index==2"></view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<button @click="submit" class="zhifu">立即支付</button>
		<view style="height: 80rpx;"></view>
		<view class="" style="width:90%; color:#6C6C6C; margin: auto; text-align: right;" @click="webview('https://jiaoyou2.10pay.cn/vip.html')">
			会员服务协议
		</view>
		<view style="height: 80rpx;"></view>
		<view style="width: 90%;margin: auto;font-size: 30rpx;color: #D6A666;">
			<view style="font-weight: 600;">10项专属特权</view>
			<view style="display: flex;align-items: center;flex-wrap: wrap;">
				<view style="width: 50%;text-align: center;margin-top: 40rpx;" v-for="(item,index) in tequan" :key="index">
					<image :src="item.url" style="width: 100rpx;height: 100rpx;"></image>
					<view style="margin-top: 20rpx;">{{item.text}}</view>
					<view style="color: #FFFFFF;font-size: 25rpx;margin-top: 20rpx;">{{item.text1}}</view>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: -1,
				payshow: false,
				list: [],
				userInfo: {},
				volley:'0',
				tequan:[
					{url:'../../static/renzheng/bg_vip_chat.png',text:'私聊特权',text1:'每日和10个新用户聊天'},
					{url:'../../static/renzheng/bg_vip_wechat.png',text:'查看微信',text1:'每日查看10个微信'},
					{url:'../../static/renzheng/bg_vip_shaixuan.png',text:'筛选城市',text1:'切换城市查看更多异性'},
					{url:'../../static/renzheng/huiyuan.png',text:'VIP身份',text1:'尊贵会员身份'},
					{url:'../../static/renzheng/tuijian.png',text:'首页推荐',text1:'优先曝光展示'},
					{url:'../../static/renzheng/bg_vip_look_other.png',text:'无限查看',text1:'无限查看异性资料'},
					{url:'../../static/renzheng/bg_vip_album.png',text:'会员相册',text1:'解锁仅会员可见的相片'},
					{url:'../../static/renzheng/bg_vip_moments.png',text:'发布动态',text1:'心情想法，想发就发'},
					{url:'../../static/renzheng/bg_vip_likes.png',text:'谁喜欢我',text1:'解锁谁喜欢了我'},
					{url:'../../static/renzheng/bg_vip_lookme.png',text:'谁查看我',text1:'解锁谁查看了我'}
				],
				system:'',
				platform:'',
				pay_index:1// 1是支付宝支付 2是微信支付
			}
		},
		onLoad() {
			this.getvipstyle()
			console.log(this.$store.state);
			this.userInfo = this.$store.state.userinfo
			
			// #ifdef MP-WEIXIN
			  this.platform='devtools'
			// #endif
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.system = res.system  // ios
					this.platform = res.platform  // 14.3
				}
			})
			// #endif
		},
		methods: {
			webview(e){
				uni.navigateTo({
					url:'/pages/webview/index?url='+e
				})
			},
			pay_type(e){ //app安卓端选择支付方式
				if(this.pay_index!=e){
					this.pay_index=e;
				}
			},
			submit() {
				if (this.active==-1) {
					this.$u.toast('请选择开通会员类型')
					return;
				}
				this.buyVip()
			},
			//微信小程序
			async buyVip() {
				var that = this;
				const {data:res} = await that.$Request({
					url:'apis/Home/User/vip_buy',
					data: {
						type: that.list[that.active].type,
						user_id: that.$store.state.userid,
						price: that.list[that.active].vip_price,
						leixing: 1
					}
				})
				console.log(res);
				if (res && res.code == 200) {
					if(this.platform == 'devtools'){ //小程序
						// 小程序支付
						that.$WxMiniprogramPay({
							money: that.list[that.active].vip_price,
							number: res.vip_order,
						})
					}else{ //app
						if(this.platform == 'ios'){ //ios系统直接苹果支付
							//app微信支付
							that.$IosprogramPay({
								money: that.list[that.active].vip_price,
								number: res.vip_order,
							})
						}else{ //安卓系统选择支付宝或微信支付
							if(that.pay_index==2){
								//微信支付
								that.$WeChatprogramPay({
									money: that.list[that.active].vip_price,
									number: res.vip_order,
								})
							}else{
								//支付宝支付
								that.$AlipayprogramPay({
									money: that.list[that.active].vip_price,
									number: res.vip_order,
								})
							}
						}
					}
				} else {
					that.$u.toast(res.result)
				}
			},
			setActive(e) {
				this.active = e.currentTarget.dataset.index
			},
			async getvipstyle(){
				const { data: res } = await this.$Request({
					url:'apis/home/user/vipstyle'
				})
				this.list = res.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #000;
		min-height: 100vh;
		.tops {
			padding: 30rpx;
			color: #fff;

			.label {
				color: rgb(213, 157, 81);
			}

			.value {
				padding: 30rpx 0;
				.item {
					padding: 6rpx 0;
					font-size: 20rpx;
					view{
						padding: 6rpx 18rpx;
						border-radius: 30rpx;
						background-color: #eee;
						color: rgb(168, 123, 56);
						margin-right: 20rpx;
					}
				}
			}
		}

		.labels {
			line-height: 40px;
			color: rgb(213, 157, 81);
			font-size: 14px;
			padding: 0 30rpx;
		}

		.contents {
			padding: 30rpx;
			display: flex;
			flex-wrap: nowrap;
			overflow: auto;

			.item {
				position: relative;
				text-align: center;
				border-radius: 30rpx;
				box-sizing: border-box;
				height: 236rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #FFFFFF;
				background-color: #535353;
				min-width: 202rpx;
				max-width: 202rpx;
				border: 5rpx solid #6C6C6C;

				&.active {
					border: 5rpx solid #E5E0B8;
					background-color: #000;
				}
			}
		}

		.contents .item:nth-child(n+2) {
			margin-left: 30rpx;
		}

		.contents .item .time.ops.a {
			margin-top: 20rpx;
		}

		.contents .item .time.type {
			font-weight: bold;
		}

		.contents .item .time.ops {
			margin-top: 6rpx;
			font-size: 24rpx;
		}

		.contents .item .price {
			margin-top: 60rpx;
			font-size: 36rpx;
		}


		.paybox {
			width: 100%;

			.top {
				position: sticky;
				top: 0;
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				background: rgb(239, 235, 255);
				z-index: 111111;
				color: #666666;
				font-size: 28rpx;

				.title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.flex {
					display: flex;
					align-items: center;

					.reflash {
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
					}
				}
			}
			.detail{
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
			}
			.price{
				display: flex;
				justify-content: space-between;
				padding: 20rpx;
				align-items: center;
				.prices{
					text-align: right;
					text{
						font-size: 48rpx;
						font-weight: bold;
					}
				}
			}
			.btns{
				padding-bottom: 10rpx ;
				display: flex;
				justify-content: space-around;
				text-align: center;
				color: #673ab7;
				.recharge{
					border-radius: 60rpx;
					width: 28%;
					padding: 20rpx 0;
					background-color: rgb(233,235,255);
				}
				.pay{
					border-radius: 60rpx;
					color: #fff;
					width: 62%;
					padding: 20rpx 0;
					background-color: #673ab7;
				}
			}
		}
	}
	.vip{
		width: 90%;
		margin: auto;
		height: 248rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
	}
	.biaoji{
		width: 113rpx;
		height: 46rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 20rpx;
	}
	.xuanzhong{
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		right: -4rpx;
		bottom: -4rpx;
	}
	.zhanshi{
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.zhifu{
		width: 80%;
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 86rpx;
		background-color: #D6A666;
		color: #FFFFFF;
		border-radius: 40rpx;
		margin-top: 30rpx;
	}
	.pay{
		display: flex;
		justify-content: space-between;
		width:90%;
		height:80rpx;
		margin:auto;
		color: #fff;
		line-height: 80rpx;
		.pay_list{
			width: 40%;
			display: flex;
			justify-content: space-between;
			border: 2px solid #fff;
			border-radius: 40rpx;
		}
		.pay_list_selected{
			width: 40%;
			display: flex;
			justify-content: space-between;
			border: 2px solid #D6A666;
			border-radius: 40rpx;
		}
		.pay_type{
			width: 130rpx;
		}
		.pay_radio{
			width: 40rpx;
			height: 40rpx;
			border: 2px solid #fff;
			border-radius: 50%;
			margin: auto 10rpx;
		}
		image{
			width: 40rpx;
			height: 40rpx;
			margin: auto 10rpx auto 25rpx;
		}
		.pay_radio_selected{
			width: 40rpx;
			height: 40rpx;
			border: 2px solid #D6A666;
			border-radius: 50%;
			margin: auto 10rpx;
		}
		.pay_selected{
			border: 2px solid #D6A666;
			border-radius: 50%;
		}
		.selected{
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			margin: 5rpx;
			background: #D6A666;
		}
	}
</style>
